<style>
    html {
        background-color: #ffffff;
    }

    .layui-iconpicker {
        max-width: 100% !important;
    }

    .layui-iconpicker-item {
        width: 100% !important;
    }
</style>
<div class="user-api-form" style="background-color: #ffffff;">

    <form id="menu-form" class="layui-form model-form" action="{{.Data.action}}" method="post"
          lay-filter="role-filter">

        <div class="layui-form-item">
            <label class="layui-form-label">上级菜单:</label>
            <div class="layui-input-block">
                <div id="userEditMenuSel">

                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">菜单标题</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="title" maxlength="100"
                       lay-verify="required" value="{{.Data.menuModel.Title}}"></div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">菜单图标</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="icon" maxlength="100"
                       value="{{.Data.menuModel.Icon}}"></div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">菜单地址</label>
            <div class="layui-input-block">
                <select name="path" lay-filter="path">
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">菜单标识</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="permission" maxlength="100"
                       lay-verify="required" value="{{.Data.menuModel.Permission}}"></div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">请求方法</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="method" maxlength="100" value="{{.Data.menuModel.Method}}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="number" class="layui-input" name="sort" aria-required="true"
                       value="{{.Data.menuModel.Sort}}"></div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required" for="menu-type">类型</label>
            <div class="layui-input-block">
                <select id="menu-type" class="layui-input" name="type" lay-filter="type"
                        lay-verify="required" aria-required="true">
                    <option {{if eq 0 $.Data.menuModel.Type }}selected{{end}} value="0">菜单</option>
                    <option {{if eq 2 $.Data.menuModel.Type }}selected{{end}} value="2">页面</option>
                    <option {{if eq 1 $.Data.menuModel.Type }}selected{{end}} value="1">按钮</option>
                    <option {{if eq 3 $.Data.menuModel.Type }}selected{{end}} value="3">接口</option>
                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required" for="menu-isHide">是否隐藏</label>
            <div class="layui-input-block">
                <select id="menu-isHide" class="layui-input" name="isHide" lay-filter="isHide"
                        lay-verify="required">
                    <option {{if eq 0 $.Data.menuModel.IsHide }}selected{{end}} value="0">否</option>
                    <option {{if eq 1 $.Data.menuModel.IsHide }}selected{{end}} value="1">是</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required" for="menu-status">状态</label>
            <div class="layui-input-block">
                <select id="menu-status" class="layui-input" name="status" lay-filter="status"
                        lay-verify="required" aria-required="true">
                    <option {{if eq 1 $.Data.menuModel.Status }}selected{{end}} value="1">启用</option>
                    <option {{if eq 0 $.Data.menuModel.Status }}selected{{end}} value="0">禁用</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="btnSubmit" lay-submit="">保存</button>
        </div>
    </form>
</div>
<script type="application/javascript">
    layui.use(['layer', 'form', 'admin', 'laydate', 'xmSelect', 'iconPicker'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        var admin = layui.admin;
        var xmSelect = layui.xmSelect;
        var iconPicker = layui.iconPicker;
        var menus = JSON.parse(`{{.Data.menuTree}}`);
        var routes = JSON.parse(`{{.Data.route}}`);
        var pid = "{{.Data.menuModel.Pid}}"
        var Path = "{{.Data.menuModel.Path}}"


        // 路由地址渲染
        if (routes.length > 0) {
            let _options = '<option value="">请选择</option>';
            let _fobRoute = ['/', '/*', '/admin', '/api.json', '/swagger/*']
            routes.forEach((item) => {
                if (_fobRoute.indexOf(item.Route) === -1) {
                    let option = '';
                    let _val = item.Handler.replace(item.Domain, '');
                    if (Path === item.Route) {
                        option = '<option value="' + _val + '" selected>' + _val + '</option>';
                    } else {
                        option = '<option value="' + _val + '">' + _val + '</option>';
                    }
                    _options += option;
                }
            })
            const elem = $('select[lay-filter="path"]');
            elem.html(_options);
            form.render(elem);

            /**
             * 勾选之后自动响应事件 填充数据
             */
            form.on('select(path)', function (data) {
                let item = routes.find((item) => {
                    let _val = item.Handler.replace(item.Domain, '');
                    return _val === data.value
                });
                if (item) {
                    let _tmpVal = $.trim(item.Route.replace(window.backendPrefix + '/', ''),);
                    _tmpVal = _tmpVal.replace(/\-/g, '');
                    _tmpVal = _tmpVal.replace(/\//g, ':');
                    _tmpVal += ":" + item.Method
                    $('input[name=permission]').val(_tmpVal);
                    $('input[name=method]').val(item.Method);
                }
            });
        }


        var url = $('#menu-form').attr('action');
        // admin.iframeAuto();  // 让当前iframe弹层高度适应
        // 表单提交事件
        form.on('submit(btnSubmit)', function (data) {
            layer.load(2);
            admin.req(url, data.field, function (data) {
                layer.closeAll('loading');
                if (data.code === 0) {
                    layer.msg(data.msg, {icon: 1});
                    admin.putTempData('t-menu-form-ok', true);  // 操作成功刷新表格
                    // 关闭当前iframe弹出层
                    admin.closeThisDialog();
                } else {
                    layer.msg(data.msg, {icon: 2});
                }
            }, 'post');

            return false;
        })

        iconPicker.render({
            // 选择器，推荐使用input
            elem: '#menu-icon',
            // 数据类型：fontClass/unicode，推荐使用fontClass
            type: 'fontClass',
            // 是否开启搜索：true/false
            search: true,
            // 是否开启分页
            page: true,
            // 每页显示数量，默认12
            limit: 100,
            // 点击回调
            click: function (data) {
                console.log(data);
                $('#iconPicker2').val(JSON.stringify(data));
            },
            // 渲染成功后的回调
            success: function (d) {

            }
        });

        const insXmSel = xmSelect.render({
            el: '#userEditMenuSel',
            height: '250px',
            name: 'pid',
            data: menus,
            initValue: [parseInt(pid)],
            model: {label: {type: 'text'}},
            prop: {
                name: 'title',
                value: 'id',
                children: 'Children'
            },
            radio: true,
            clickClose: true,
            tree: {
                show: true,
                indent: 15,
                strict: false,
                expandedKeys: true,
                clickCheck: true,
            }
        });
    });
</script>